<template>
<div id="app">
    <div class="container">
        <div class="close"><span class="iconfont iconicon-test" @click="$router.push('/index')"></span></div>
        <div class="logo"><span class="iconfont iconnew"></span></div>
        <div class="inputs">
     
            <hmInput ref="username" v-model="user.username" 
            placeholder="请输入手机号" 
            :reg="/^1[3,4,5,6,7,8,9]\d{9}$/" 
            ></hmInput>
            <hmInput ref="nickname" v-model="user.nickname" placeholder="请输入昵称"></hmInput>
            <hmInput ref="password" v-model="user.password" :reg="/^.{3,10}$/" type="password" placeholder="请输入密码" ></hmInput>
        </div>
        <p class="tips">
            有账号？
            <a href="#/login" class="">去登录</a>
        </p>
        <!-- <div class="button">登录按钮</div> -->
        <van-button type="primary" round  block @click="registerFn">注册</van-button>
    </div>
</div>
</template>

<script>
import { register } from "../api/user.js"
export default {
    data(){
        return {
            user: {
                username: "13243234552",
                password: "",
                nickname: ""
            }
        }
    },
    methods:{
        // 注册
        registerFn(){
            // 添加判断，用户输入内容是否合法
            if(!this.$refs.username.isOk){
                this.$toast.fail("手机号码不正确，请检查！")
                return
            }
            if(!this.$refs.nickname.isOk){
                this.$toast.fail("昵称不能为空！");
                return
            }
            if(!this.$refs.password.isOk){
                this.$toast.fail("密码长度3到10位，请检查！")
                return
            }
            // 调用注册接口
            register(this.user).then(res=>{
                // console.log(42,res);
                if(res.data.message === "注册成功"){
                    // 跳转到登录页面
                    this.$toast.success(res.data.message)
                    this.$router.push({
                        path: "/login"
                    })
                }else{
                    this.$toast.fail(res.data.message)
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.container {
    padding: 20px;
}
.close {
    span {
        font-size: (27 / 360) * 100vw;
    }
}
.logo {
    display: flex;
    justify-content: center;

    span {
        display: block;
        font-size: (126 / 360) * 100vw;
        color: #d81e06;
    }
}
.inputs {
    input {
        margin-bottom: 20px;
    }
}
.tips {
    text-align: right;
    margin-bottom: 20px;
    a {
        color: #3385ff;
    }
}
</style>